<template>
    <div class="esp-home">
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="18">
                        <div style="margin-top: 5px">
                            <img src="../assets/logo.png" width="50" height="50" style="border-radius: 50%"/>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div style="margin-top: 20px;margin-left: 350px;">
                            <span class="el-icon-user-solid"></span>
                        </div>
                    </el-col>
                </el-row>
            </el-header>

            <el-container>
                <el-aside>
                    <el-menu default-active="2"
                             class="el-menu-vertical-demo"
                             background-color="#545c64"
                             text-color="#fff"
                             active-text-color="#ffd04b"
                             style="min-height: calc(100vh - 50px)">
                        <el-submenu v-for="(item,index) in menuList" :key="index" :index=" 'item-' + index">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{{ item.firstName }}</span>
                            </template>
                            <el-menu-item v-for="(item2, index2) in item.secList" :key="index2"
                                          :index="'item-' + index + '-' + index2">
                                <router-link to="" class="rlink">
                                    {{ item2.secName }}
                                </router-link>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>


                <el-main>
                    <el-tag>标签一</el-tag>
                    <el-tag type="success">标签二</el-tag>
                    <el-tag type="info">标签三</el-tag>
                    <el-tag type="warning">标签四</el-tag>
                    <el-tag type="danger">标签五</el-tag>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            menuList: [],
        };
    },
    methods: {
        getMenuList(){
            this.axios.get("/first/getMenuLit").then(response=>{
                if (response.data.code == 1 ){
                    this.menuList = response.data.data;
                } else {
                    this.$message.error(response.data.msg);
                }
            })
        }

    },
    created() {
        this.getMenuList();
    }
}
</script>


<style scoped>
.el-header {
    background-color: #DCDFE6;
    background-repeat: no-repeat;
    overflow: hidden;
    height: 100%;
}

.el-aside {
    color: #333;
}

.el-aside, .el-main {
    transition: width 0.3s, margin-left 0.3s;
}

.rlink {
    color: inherit; /*继承父标签样式*/
    text-decoration: none; /* 去除下划线 */
}

</style>
